<template>
	<div>
		<div class="list-box" style="min-height:500px;">
			<div class="pannel-title pannel-between">
				<div>文章审核详情</div>
			</div>
			<div class="line"></div>
			<div class="data-table article-info">
				<div>
					<label>文章预览图：</label>
					<img v-if="formState.thumbnails" :src="formState.thumbnails" />
					<a-tag v-else color="#cccccc">无</a-tag>
				</div>
				<div>
					<label>文章关键字：</label>
					<a-tag v-for="item in formState.keywords" :key="item" color="#cccccc">{{item}}</a-tag>
				</div>
				<div>
					<label>阅览权限：</label>
					<a-tag v-if="formState.isMember === 'Y'" color="#2db7f5">会员可阅览</a-tag>
					<a-tag v-else-if="formState.isMember === 'N'" color="#cccccc">不限制</a-tag>
				</div>
				<div>
					<label>是否隐藏：</label>
					<a-tag v-if="formState.isHide === 'Y'" color="#cccccc">隐藏</a-tag>
					<a-tag v-else-if="formState.isHide === 'N'" color="#2db7f5">显示</a-tag>
				</div>
				<div>
					<label>是否允许转载：</label>
					<a-tag v-if="formState.allowReprint === 'N'" color="#cccccc">不允许</a-tag>
					<a-tag v-else-if="formState.allowReprint === 'Y'" color="#2db7f5">允许</a-tag>
				</div>
				<div>
					<label>审核状态：</label>
					<a-tag v-if="formState.status === ' Pending'" color="#108ee9">待审核</a-tag>
					<a-tag v-else-if="formState.status === 'Approved'" color="#87d068">审核通过</a-tag>
					<a-tag v-else-if="formState.status === 'Rejected'" color="#f50">驳回</a-tag>
				</div>
				<template v-if="formState.rejectedReason">
					<div></div>
					<div>
						<label>驳回理由：</label>
						<div style="background:#eee;padding:5px;">{{formState.rejectedReason}}</div>
					</div>
				</template>
			</div>
			<div class="line"></div>
			<div class="data-table article-content">
				<h2>{{formState.title}}</h2>
				<div class="article-info">
					<span>作者：{{formState.author}}</span>
					<span>分类：{{cateName}}</span>
					<span>创建时间：{{formState.createTime}}</span>
				</div>
				<div>
					<div v-if="formState.editType === 'HTML'" class="content" v-html="formState.content"></div>
					<mavon-editor v-else-if="formState.editType === 'MD'" ref="editor2" :externalLink="externalLink" codeStyle="dark" :ishljs="true" :subfield="false" defaultOpen="preview" :editable="false" style="height:100%" v-model="formState.content"></mavon-editor>
				</div>
				<div class="audit-btn">
					<a-button type="default" shape="round" @click="cancel()">返回</a-button>
					<a-button v-if="formState.status === ' Pending'" type="primary" shape="round" @click="Approved()">审核通过</a-button>
					<a-button v-if="formState.status === ' Pending'" type="danger" shape="round" @click="Rejected()">审核驳回</a-button>
				</div>
			</div>
			<a-modal v-model:visible="visible" title="审核驳回">
				<a-textarea
				v-model:value="reason"
				placeholder="请输入驳回理由"
				:auto-size="{ minRows: 2, maxRows: 5 }"
				/>
				<template #footer>
					<div class="modal-btn">
						<a-button type="default" shape="round" @click="closeModal()">取消</a-button>
						<a-button :loading="btnLoading" type="danger" shape="round" @click="confirm()">驳回</a-button>
					</div>
				</template>
			</a-modal>
		</div>
		<!-- <div class="list-box" style="margin-top: 5px" v-if="isShowCommentList">
			<div class="pannel-title pannel-between">
				<div>评价</div>
			</div>
			<div class="data-table">
				<a-table :columns="columns" :row-key="(record) => record.id" :data-source="commentList" :pagination="false" :loading="isLoading">
					<template #action="{ record }">
						<a @click="deleteMenu(record)" title="删除"><img src="@/assets/images/cz-delete.png" /></a>
					</template>
					<template #time="{ text }">
						{{ formatDate(text) }}
					</template>
				</a-table>
			</div>
		</div> -->
	</div>
</template>
<script>
import { useStore } from "vuex";
import { ref } from "@vue/reactivity";
import { message, Button, Modal, Input, Tag } from "ant-design-vue";
import httpRequest from "@/util/httpRequest";
import baseUtil from "@/util/baseUtil";
import {mavonEditor} from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
export default {
	components: {
		mavonEditor,
		AButton: Button,
		AModal:Modal,
		ATextarea:Input.TextArea,
		ATag:Tag
	},
	setup() {
		const store = useStore();
		//text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
		store.dispatch("setBreadcrumb", {
			text: "文章管理 / 漏洞文章",
			isBack: true,
		});
		const formState = ref({
			id: null,
			title: "",
			author: "",
			displayPriority: "",
			cateId: "",
			// logo: "",
			content: "",
			allowReprint: "",
			isHide: "",
			isMember:"",
			keywords:"",
			editType:"MD",
			thumbnails:""
		});
		const allowReprints = ref([
			{ value: "Y", label: "允许" },
			{ value: "N", label: "不允许" },
		]);
		const isHides = ref([
			{ value: "Y", label: "隐藏" },
			{ value: "N", label: "显示" },
		]);
		return {
			formState,
			btnLoading: ref(false),
			pageLoading: ref(true),
			cateIds: ref([]),
			cateList: ref([]),
			allowReprints,
			isHides,
			isLoading:ref(false),
			visible:ref(false),
			reson:ref(""),
			toolbarsExclude:ref(['revoke','next', 'save','htmlPreview','github'])
		};
	},
	data() {
		return {
			isShowCommentList: false,
			commentList: [],
			pages: {
				page: 1,
				pageSize: 10,
			},
			columns: [
				{
					title: "编号",
					dataIndex: "id",
					key: "id",
				},
				{
					title: "用户ID",
					dataIndex: "name",
					key: "name",
				},
				{
					title: "内容",
					dataIndex: "comment",
					key: "comment",
				},
				{
					title: "发布时间",
					dataIndex: "create_time",
					key: "create_time",
					slots: { customRender: "time" },
				},
			],
			isShowHtm: false,
		};
	},
	computed:{
		cateName(){
			let text = "";
			if(this.cateList && this.formState && this.formState.cateId){
				const cate = this.cateList.filter(e=>e.id === this.formState.cateId);
				if(cate &&cate.length>0){
					text = cate[0].name;
				}
			}
			return text;
		}
	},
	mounted() {
		if (this.$route.query.id) {
			this.isShowCommentList = true;
			this.pageLoading = false;
			httpRequest.post("获取漏洞文章详情", { id: this.$route.query.id }).then((res) => {
				this.formState = { ...baseUtil.LineToHump(res.data) };
				this.formState.displayPriority = String(this.formState.displayPriority);
				this.formState.createTime = baseUtil.DateFormat(this.formState.createTime*1000,"yyyy-MM-dd HH:mm:ss");
				if (this.formState.isDel == "Y") {
					this.showSubmin = false;
				}
			}).finally(()=>{this.pageLoading = true;});
			this.pages.articleId = this.$route.query.id;
			httpRequest.post("获取漏洞文章评论列表", this.pages).then((res) => {
				this.commentList = res.data.data;
			});
		}
		httpRequest.post("获取文章分类集合", { level: "1", type: "" }).then((res) => {
			this.cateList = res.data;
			this.cateIds = baseUtil.GetByTree(res.data);
		});
	},
	methods: {
		cancel() {
			this.$router.back();
		},
		formatDate(val) {
			return baseUtil.getTime(val);
		},
		Approve(){
            Modal.confirm({
                title: "系统提示",
                content: "确认通过审核？",
                okText: "确认",
                cancelText: "取消",
                onOk: () => {
                    return new Promise((res) => {
                        httpRequest
                            .post("审核文章", { id: this.formState.id ,status:'Approved'})
                            .then(() => {
                                message.success("文章审核成功");
                                this.getList();
                            })
                            .catch(() => {
                                message.warning({ content: "文章审核失败", key: "error" });
                            })
                            .finally(() => {
                                res();
                            });
                    });
                },
            })
        },
		Reject(){
			this.visible = true;
			this.reason = "";
		},
		closeModal(){
			this.visible = false;
		},
		confirm(){
			if(this.reason.trim()){
				this.btnLoading = true;
				httpRequest
					.post("审核文章", { id: this.formState.id ,status:'Rejected',reason:this.reason})
					.then(() => {
						message.success("文章驳回成功");
						this.getList();
					})
					.catch(() => {
						message.warning({ content: "文章驳回失败", key: "error" });
					})
					.finally(() => {
						this.visible = false;
						this.btnLoading = false;
					});
			}
		},
	},
};
</script>
<style lang="less" scoped>
.pannel-form{
	width: 100%;
}
.line {
	width: 100%;
	margin: 20px 0;
	border-top: 1px solid #eee;
}
.article-content{
	position: relative;
	h2{
		font-size: 26px;
		height: 60px;
		line-height: 60px;
	}
	.article-info{
		background: #fafafa;
		color: #888;
		padding:10px;
		border-radius: 5px;
		margin-bottom: 30px;
		span{
			margin:0 20px;
		}
	}
	.content{
		margin-bottom: 30px;
	}
	.is_del{
		width: 100px;
		height: 100px;
		border:3px solid rgba(255,0,0,0.2);
		border-radius:50px;
		font-size: 24px;
		text-align: center;
		line-height: 100px;
		color: rgba(255,0,0,0.3);
		transform: rotate(-30deg);
		position: absolute;
		right: 0;
		top: 0;
	}
}
.article-info{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	>div{
		width: 30%;
		position: relative;
		padding:15px 0 15px 110px;
		text-align: left;
		label{
			position: absolute;
			left: 0;
			top: 10px;
			height: 34px;
			line-height: 34px;
			text-align: right;
			display: block;
			width: 110px;
		}
	}
}
.audit-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	padding:20px 0;
	margin-top: 20px;
	button{
		margin:0 20px;
	}
}
</style>
